import React, { useState, useEffect } from 'react'
import { useSearchParams, useNavigate } from 'react-router-dom'
import { LeftOutline, EnvironmentOutline,UserOutline,EyeOutline } from 'antd-mobile-icons'
import './Job.scss'
import { getJob } from "../../utils/request"
export default function Detail() {
  const [data, setData] = useState([])
  const [searchParams] = useSearchParams()
  const navigate = useNavigate()

  // //获取数据
  useEffect(() => {
    //获取id
    let id = searchParams.get('_id')
    //调用接口
    getJob({ _id: id }).then(res => {
      setData(res.data.plist)
    })
  }, [])

  return (
    <div className='detail'>
      <div className='detail-top' onClick={() => { navigate('/app/job') }}>
        <LeftOutline className='detail-top-icon' />
      </div>
      <div className='detail-content'>
        {
          data.map((item, index) => {
            return <div className='detail-content-item' key={item._id}>
              <div className='item-box'>
                <div className='item-img'>
                  <img src={`/src/component/ysh/imgs/` + item.companyLogo} alt="" />
                </div>
                <p>{item.companyName}</p>
                <div className='item-address'>
                  <EnvironmentOutline />
                  <span>{item.companyAddress}</span>
                </div>
              </div>
              {/*公司介绍*/}
              <div className='item-box-introduce'>
                <span>公司介绍</span>
                <p>{item.companyDesc}</p>
              </div>
              {/*详细信息*/}
              <div className='item-box-xiang'>
                <span>企业基本信息</span>
                <div className='xiang-box'>
                  <div>
                    <p>企业类型</p>
                    <span>{"有限责任公司(自然人投资或控股)"}</span>
                  </div>
                  <div>
                    <p>行业类型</p>
                    <span>{"产品/服务"}</span>
                  </div>
                  <div>
                    <p>经营状态</p>
                    <span>{"存续（在营、开业、在册"}</span>
                  </div>
                  <div>
                    <p>成立日期</p>
                    <span>{"2016-03-08"}</span>
                  </div>
                  <div>
                    <p>注册资本</p>
                    <span>{"300万元"}</span>
                  </div>
                  <div>
                    <p>注册地址</p>
                    <span>{"深圳"}</span>
                  </div>
                  <div>
                    <p>经营范围</p>
                    <span>{"人力资源管理；互联网信息服务；职业介绍；人才供求信息的收集、整理、储存、发布与咨询服务；人才推荐、招聘、培训及测评；后勤管理（除行政许可）；家政保洁服务。（依法须经批准的项目，经相关部门批准后方可开展经营活动）"}</span>
                  </div>
                </div>
              </div>
            </div>
          })
        }
      </div>
      <div className='detail-bottom'>
        <div className='detail-bottom-head'>
          <span>相关岗位</span>
        </div>
        <div className='detail-bottom-box'>
          {
            data.map((item, index) => {
              return <div className='item' key={item._id} onClick={()=>{
                navigate('/position?_id=' + item._id)
              }} >
                <div className='item-top'>
                  <div className='item-top-left'>
                    <img src={`/src/component/ysh/imgs/` + item.companyLogo} alt="" />
                    <span>{item.companyName}</span>
                  </div>
                  <div className='item-top-right'>

                  </div>
                </div>
                <div className='item-body'>
                  <h3>{item.postName}</h3>
                  <p>{item.companyAddress}</p>
                  <span>{item.postDesc}</span>
                </div>
                <div className='item-bottom'>
                  <div className='item-bottom-left'>
                    <div>
                      <UserOutline />
                    </div>
                    <span>{323}</span>
                  </div>
                  <div className='item-bottom-right'>
                    <div>
                      <EyeOutline />
                    </div>
                    <span>{item.postView}</span>
                  </div>
                </div>
              </div>
            })
          }
        </div>
      </div>
    </div>
  )
}
